<script setup lang="tsx">
import { computed, onMounted, ref, watch } from 'vue';
import type { Crontab } from '@/service/api';
import { $t } from '@/locales';

defineOptions({
  name: 'CrontabDay'
});

interface Props {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
  check: Function;
  cron: Crontab;
}
const props = defineProps<Props>();

interface Emits {
  (e: 'update'): void;
}
const emit = defineEmits<Emits>();

const dayRadioValue = ref('1');
const dayWorkday = ref(1);
const dayCycle01 = ref(1);
const dayCycle02 = ref(2);
const dayAverage01 = ref(1);
const dayAverage02 = ref(1);
const dayCheckboxList = ref<string[]>([]);

const dayOptions: any = [];
function initDayOptions() {
  for (let i = 1; i < 31; i += 1) {
    dayOptions.push({
      label: i,
      value: i
    });
  }
}
initDayOptions();

function retsetParam() {
  dayWorkday.value = 1;
  dayCycle01.value = 1;
  dayCycle02.value = 2;
  dayAverage01.value = 1;
  dayAverage02.value = 1;
  dayCheckboxList.value = [];
}

// 计算两个周期值
const dayCycleTotal = computed(() => {
  const c01 = props.check(dayCycle01.value, 1, 30);
  const c02 = props.check(dayCycle02.value, c01 ? c01 + 1 : 2, 31, 31);
  return `${c01}-${c02}`;
});
// 计算平均用到的值
const dayAverageTotal = computed(() => {
  const a01 = props.check(dayAverage01.value, 1, 30);
  const a02 = props.check(dayAverage02.value, 1, 31 - a01 || 0);
  return `${a01}/${a02}`;
});
// 计算工作日格式
const workdayCheck = computed(() => {
  const day = props.check(dayWorkday.value, 1, 31);
  return day;
});
// 计算勾选的checkbox值合集
const dayCheckboxString = computed(() => {
  const str = dayCheckboxList.value.join();
  return str === '' ? '*' : str;
});

watch(
  () => props.cron,
  () => {
    dayValueChange(props.cron);
  }
);
watch(
  () => dayRadioValue.value,
  () => {
    radioChange();
  }
);
watch(
  () => dayCycleTotal.value,
  () => {
    dayCycleChange();
  }
);
watch(
  () => dayAverageTotal.value,
  () => {
    dayAverageChange();
  }
);
watch(
  () => workdayCheck.value,
  () => {
    workdayChange();
  }
);
watch(
  () => dayCheckboxString.value,
  () => {
    dayCheckboxChange();
  }
);

// 单选按钮值变化时
function radioChange() {
  ('day rachange');
  if (dayRadioValue.value !== '2' && props.cron.week !== '?') {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    emit('update', 'week', '?', 'day');
  }
  switch (dayRadioValue.value.toString()) {
    case '1':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'day', '*');
      break;
    case '2':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'day', '?');
      break;
    case '3':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'day', dayCycleTotal.value);
      break;
    case '4':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'day', dayAverageTotal.value);
      break;
    case '5':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'day', `${dayWorkday.value}W`);
      break;
    case '6':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'day', 'L');
      break;
    case '7':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'day', dayCheckboxString.value);
      break;
    default:
      break;
  }
  // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
  ('day rachange end');
}
// 周期两个值变化时
function dayCycleChange() {
  dayRadioValue.value = '3';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'day', dayCycleTotal.value);
}
// 平均两个值变化时
function dayAverageChange() {
  dayRadioValue.value = '4';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'day', dayAverageTotal.value);
}
// 最近工作日值变化时
function workdayChange() {
  dayRadioValue.value = '5';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'day', `${workdayCheck.value}W`);
}
// checkbox值变化时
function dayCheckboxChange() {
  dayRadioValue.value = '7';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'day', dayCheckboxString.value);
}

function dayValueChange(cronVal: Crontab) {
  dayRadioValue.value = '';
  retsetParam();
  const val = cronVal.day;
  if (val === '*') {
    dayRadioValue.value = '1';
  } else if (val.includes('?')) {
    dayRadioValue.value = '2';
  } else if (val.includes('-')) {
    dayRadioValue.value = '3';
    const v = val.split('-');
    dayCycle01.value = Number.parseInt(v[0], 10);
    dayCycle02.value = Number.parseInt(v[1], 10);
  } else if (val.includes('/')) {
    dayRadioValue.value = '4';
    const v = val.split('/');
    dayAverage01.value = Number.parseInt(v[0], 10);
    dayAverage02.value = Number.parseInt(v[1], 10);
  } else if (val.includes('W')) {
    dayRadioValue.value = '5';
    const v = val.split('W');
    dayWorkday.value = Number.parseInt(v[0], 10);
  } else if (val.includes('L')) {
    dayRadioValue.value = '6';
  } else {
    dayRadioValue.value = '7';
    dayCheckboxList.value = val.split(',');
  }
}

onMounted(() => {
  const cronVal = props.cron;
  dayValueChange(cronVal);
});
</script>

<template>
  <div>
    <NForm>
      <NRadioGroup v-model:value="dayRadioValue">
        <NFormItem class="form-item-height">
          <NRadio value="1">{{ $t('common.job.dayOne') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="2">{{ $t('common.job.notSpecify') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="3" />
          &nbsp;{{ $t('common.job.dayThreePre') }}&nbsp;
          <NInputNumber v-model:value="dayCycle01" :min="1" :max="30" button-placement="both"></NInputNumber>
          &nbsp;-&nbsp;
          <NInputNumber
            v-model:value="dayCycle02"
            :min="dayCycle01 ? dayCycle01 + 1 : 2"
            :max="31"
            button-placement="both"
          />
          &nbsp;{{ $t('common.job.dayThreeSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="4" />
          &nbsp;{{ $t('common.job.dayFourPre') }}&nbsp;
          <NInputNumber v-model:value="dayAverage01" :min="1" :max="30" button-placement="both" />
          &nbsp;{{ $t('common.job.dayFourMid') }}&nbsp;
          <NInputNumber v-model:value="dayAverage02" :min="1" :max="31 - dayAverage01 || 1" button-placement="both" />
          &nbsp;{{ $t('common.job.dayFourSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="5" />
          &nbsp;{{ $t('common.job.dayFivePre') }}&nbsp;
          <NInputNumber v-model="dayWorkday" :min="1" :max="31" button-placement="both" />
          &nbsp;{{ $t('common.job.dayFiveSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="6">{{ $t('common.job.daySix') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="7" />
          &nbsp;{{ $t('common.job.specify') }}&nbsp;
          <NSelect
            v-model:value="dayCheckboxList"
            :options="dayOptions"
            multiple
            class="w-50%"
            :placeholder="$t('common.job.multipleChoices')"
          />
        </NFormItem>
      </NRadioGroup>
    </NForm>
  </div>
</template>

<style scoped>
.form-item-height {
  --n-blank-height: 0px !important;
  --n-feedback-height: 0px !important;
}
</style>
